<template>
    <main-header></main-header>
    <table-tool
        class="table"
        title="轮播列表"
        :data="tableData"
        v-model:columns="columns"
        :loading="loading"
        @reFresh="getList"
        @handleAdd="addFn(false)"
        isExport
    >
        <template #content="{ column, text, record }">
            <template v-if="column && column.dataIndex === 'img_url'">
                <a-image :width="100" :src="text" />
            </template>
            <template v-if="column && column.dataIndex === 'seq'">
                <span @click="seqChange(record)" v-if="!record.is_change">{{ text }}</span>
                <input
                    class="ipt"
                    @blur="seqBlur(record)"
                    width="200px"
                    v-else
                    v-model="record.seq"
                />
            </template>
            <template v-if="column && column.dataIndex === 'status'">
                <a-switch
                    v-model:checked="record.status"
                    checked-children="启"
                    un-checked-children="禁"
                    @change="statusChange(record)"
                />
            </template>
            <template v-if="column && column.dataIndex === 'caozuo'">
                <a-button type="link" @click="addFn(true, record.id)">编辑</a-button>
                <a-popconfirm
                    title="你确定你要删除？"
                    ok-text="确认"
                    @confirm="handleDel(record)"
                    cancel-text="取消"
                >
                    <a-button type="link">删除</a-button>
                </a-popconfirm>
            </template>
        </template>
    </table-tool>
    <table-pagination
        v-show="total > 0"
        @pagination="getList"
        v-model:page="page.current"
        v-model:pageSize="page.pageSize"
        :total="total"
    />
    <a-modal
        v-model:visible="visible"
        :title="!isEdit ? '增加轮播' : '修改轮播'"
        :footer="false"
        @cancel="reset"
    >
        <a-form
            :model="silderForm"
            ref="silderFormRef"
            layout="vertical"
            @finish="silderFormFinish"
        >
            <a-form-item
                name="title"
                label="轮播名称"
                :rules="[{ required: true, message: '请输入' }]"
            >
                <a-input
                    v-model:value="silderForm.title"
                    allow-clear
                    placeholder="请输入"
                ></a-input>
            </a-form-item>
            <a-form-item name="url" label="跳转的url">
                <a-input v-model:value="silderForm.url" allow-clear placeholder="请输入"></a-input>
            </a-form-item>
            <a-form-item name="seq" label="排序">
                <a-input v-model:value="silderForm.seq" allow-clear placeholder="请输入"></a-input>
            </a-form-item>
            <a-form-item name="img" label="图片" :rules="[{ required: true, message: '请上传' }]">
                <oss-upload v-model:value="silderForm.img">
                    <a-button>
                        <upload-outlined></upload-outlined>
                        请选择轮播图
                    </a-button>
                </oss-upload>
            </a-form-item>
            <a-form-item>
                <a-image :width="100" v-if="isEdit" :src="silderForm.img_url" />
            </a-form-item>
            <a-form-item>
                <a-button type="primary" html-type="submit">{{
                    !isEdit ? '增加' : '修改'
                }}</a-button>
                <a-button style="margin-left: 10px" @click="reset">重置</a-button>
            </a-form-item>
        </a-form>
    </a-modal>
</template>

<script setup>
import { onMounted, reactive, ref, getCurrentInstance } from 'vue'
import {
    getSildesListAPI,
    statusSildesAPI,
    delSildesAPI,
    addSildesAPI,
    getSildesInfoAPI,
    updateSildesAPI,
    seqSildesAPI
} from '@/api/slides.js'
const { proxy: _this } = getCurrentInstance()
const tableData = ref([])
const columns = ref([
    { title: '轮播图片', dataIndex: 'img_url' },
    { title: '标题', dataIndex: 'title' },
    { title: '跳转链接', dataIndex: 'url' },
    { title: '是否禁用', dataIndex: 'status' },
    { title: '排序', dataIndex: 'seq' },
    { title: '更新时间', dataIndex: 'updated_at' },
    { title: '操作', dataIndex: 'caozuo' }
])

const total = ref(0)
const loading = ref(false)
const page = reactive({
    current: 1,
    pageSize: 10
})
const getList = async () => {
    loading.value = true
    const res = await getSildesListAPI(page)
    res.data.forEach((item) => {
        item.status = item.status === 0 ? false : true
        item.is_change = false
    })
    tableData.value = res.data
    total.value = res.meta.pagination.total
    loading.value = false
}
onMounted(() => {
    getList()
})
const statusChange = (row) => {
    statusSildesAPI(row.id).then((res) => {})
}
const handleDel = (row) => {
    delSildesAPI(row.id).then((res) => {
        _this.$message.success('删除成功')
        getList()
    })
}
const visible = ref(false)
const silderFormRef = ref()
const isEdit = ref(false)
const silderForm = reactive({
    title: '',
    url: '',
    img: '',
    seq: ''
})
const editId = ref('')
const addFn = (flag, id) => {
    isEdit.value = flag
    visible.value = true
    editId.value = id
    if (flag) {
        getSildesInfoAPI(id).then((res) => {
            const { img, img_url, seq, title, url } = res
            silderForm.title = title
            silderForm.url = url
            silderForm.img = img
            silderForm.img_url = img_url
            silderForm.seq = seq
        })
    }
}
const reset = () => {
    silderFormRef.value.resetFields()
}
const silderFormFinish = async (value) => {
    if (isEdit.value) {
        const res = await updateSildesAPI(value, editId.value)
    } else {
        const res = await addSildesAPI(value)
    }
    _this.$message.success(isEdit.value ? '修改成功' : '添加成功')
    visible.value = false
    getList()
}
const num = ref('')
const seqChange = (row) => {
    row.is_change = true
    num.value = row.seq
}
const seqBlur = (row) => {
    row.is_change = !row.is_change
    if (num.value !== row.seq) {
        seqSildesAPI({ seq: row.seq }, row.id).then((res) => {
            _this.$message.success('修改成功')
        })
    }
}
</script>
<style scoped lang="scss">
.table {
    margin-top: 20px;
}
.ipt {
    border: 1px solid #1890ff;
    padding: 3px 5px;
    width: 100px;
}
</style>
